<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>批量添加展位</span>
        <el-button
          style="float: right; padding: 0;margin-left:14px"
          type="text"
          @click="goto('/jobfair/positionTpl/list')"
        >
          返回
        </el-button>
        <el-button
          style="float: right; padding: 0;"
          type="text"
          @click="onPositionAdd('formPositionAdd')"
        >
          保存
        </el-button>
      </div>
      <el-form
        ref="formPositionAdd"
        class="common-form"
        :model="form"
        label-width="120px"
        :rules="rules"
        :inline-message="true"
      >
        <div v-for="(item, index) in form.area" :key="index">
          <el-form-item label="展区编号" required>
            <el-select v-model="form.area[index]" placeholder="选择模板">
              <el-option
                v-for="(v, k) in area"
                :key="k"
                :label="v"
                :value="v"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="展位号" prop="position" class="is-required">
            <el-input v-model="form.position_start[index]" class="position" />
            至
            <el-input v-model="form.position_end[index]" class="position" />
          </el-form-item>
          <div class="border" />
        </div>
        <el-form-item label="">
          <el-button type="primary" @click="onPositionAdd('formPositionAdd')">保存</el-button>
          <el-button type="primary" @click="onArea">继续添加</el-button>
          <el-button @click="goto('/jobfair/positionTpl/list')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="spaceline" />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>批量删除展位</span>
        <el-button
          style="float: right; padding: 0;margin-left:14px"
          type="text"
          @click="goto('/jobfair/positionTpl/list')"
        >
          返回
        </el-button>
        <el-button
          style="float: right; padding: 0;"
          type="text"
          @click="onPositionBatchDel('formPositionDel')"
        >
          保存
        </el-button>
      </div>
      <el-form
        ref="formPositionDel"
        class="common-form"
        :model="formPosition"
        label-width="120px"
        :rules="rules"
        :inline-message="true"
      >
        <el-form-item label="展区编号" class="is-required">
          <el-select v-model="formPosition.area" placeholder="选择模板">
            <el-option
              v-for="(v, k) in info.area"
              :key="k"
              :label="v"
              :value="v"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="展位号" prop="position" class="is-required">
          <el-input v-model="formPosition.position_start" class="position" />
          至
          <el-input v-model="formPosition.position_end" class="position" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onPositionBatchDel('formPositionDel')">保存</el-button>
          <el-button @click="goto('/jobfair/positionTpl/list')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="spaceline" />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>删除展区</span>
        <el-button
          style="float: right; padding: 0;margin-left:14px"
          type="text"
          @click="goto('/jobfair/positionTpl/list')"
        >
          返回
        </el-button>
        <el-button
          style="float: right; padding: 0;"
          type="text"
          @click="onAreaDel('formAreaDel')"
        >
          保存
        </el-button>
      </div>
      <el-form
        ref="formAreaDel"
        class="common-form"
        :model="formArea"
        label-width="120px"
        :rules="rules"
        :inline-message="true"
      >
        <el-form-item label="展区编号" class="is-required">
          <el-select v-model="formArea.area" placeholder="选择模板">
            <el-option
              v-for="(v, k) in info.area"
              :key="k"
              :label="v"
              :value="v"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onAreaDel('formAreaDel')">保存</el-button>
          <el-button @click="goto('/jobfair/positionTpl/list')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="spaceline" />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>展位图</span>
        <el-button
          style="float: right; padding: 0;margin-left:14px"
          type="text"
          @click="goto('/jobfair/positionTpl/list')"
        >
          返回
        </el-button>
        <el-button
          style="float: right; padding: 0;"
          type="text"
          @click="goto('/jobfair/positionTpl/list')"
        >
          保存
        </el-button>
      </div>
      <el-upload
        :action="apiUpload"
        :headers="headers"
        list-type="picture-card"
        :on-success="handlePhotoSuccess"
        :before-upload="beforePhotoUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="img_src_arr"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-card>
    <div class="spaceline" />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>展位情况一览（鼠标点击可删除展区）</span>
      </div>
      <div class="jobfair_position">
        <div class="area">
          <ul>
            <li v-for="(item,index) in info.area" :key="index" :class="areaVal==item?'select':''" @click="switchArea(item)">{{ item }}区</li>
            <div class="clear" />
          </ul>
        </div>
        <div v-for="(item,index) in info.area" :key="index">
          <div v-if="areaVal==item" class="booth">
            <div v-for="(v,k) in info.position[item]" :key="k" class="li delete" title="点击删除" @click="onPositionDel(item,k,v)">{{ v }}</div>
            <div class="clear" />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { positionTplInfo, positionTplImgDelete, positionTplImgAdd, positionTplPositionAdd, positionTplPositionDelete, positionTplPositionBatchDelete, positionTplAreaDelete } from '@/api/jobfair'
import apiArr from '@/api'

export default {
  data() {
    return {
      tplId: '',
      dialogImageUrl: '',
      dialogVisible: false,
      headers: { admintoken: getToken() },
      fileupload_size: '',
      fileupload_ext: '',
      apiUpload: window.global.RequestBaseUrl + apiArr.upload,
      img_src_arr: [],
      area: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'X', 'Y', 'Z'],
      info: {},
      areaVal: 'A',
      form: {
        area: [],
        position_start: [],
        position_end: []
      },
      formPosition: {
        area: '',
        position_start: '',
        position_end: ''
      },
      formArea: {
        area: ''
      },
      infoLoading: !1,
      rules: {
        position: [
          { type: 'number', message: '请正确填写展位号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    config() {
      return this.$store.state.config
    }
  },
  created() {
    this.tplId = this.$route.query.id
    this.fileupload_size = this.config.fileupload_size
    this.fileupload_ext = this.config.fileupload_ext
    this.init()
  },
  methods: {
    init: function(){
      const that = this
      that.getPosition(function(){
        that.form = {
          area: [],
          position_start: [],
          position_end: []
        }
        that.formPosition = {
          area: that.info.area[0],
          position_start: '',
          position_end: ''
        }
        that.formArea = {
          area: that.info.area[0]
        }
        that.onArea()
      })
    },
    getPosition: function(f){
      this.infoLoading = true
      const param = { id: this.tplId }
      positionTplInfo(param, 'get').then(response => {
        var img_src_arr = []
        this.info = response.data.info
        if (Object.keys(this.info.position_img).length > 0){
          for (var i in this.info.position_img){
            img_src_arr.push({
              name: i,
              url: this.info.position_img[i]
            })
          }
          this.img_src_arr = img_src_arr
        }
        this.areaVal = response.data.info.area[0]
        this.infoLoading = false
        f && f()
      }).catch(() => {})
    },
    onArea: function(){
      this.form.area.push('A')
      this.form.position_start.push('')
      this.form.position_end.push('')
    },
    onPositionAdd(formName) {
      var insertData = Object.assign({}, this.form)
      this.$refs[formName].validate(valid => {
        if (valid) {
          insertData['id'] = this.tplId
          positionTplPositionAdd(insertData).then(response => {
            this.$message.success(response.message)
            this.init()
            return true
          }).catch(() => {})
        } else {
          return false
        }
      })
    },
    onPositionBatchDel: function(formName){
      const that = this
      that.$confirm('确定删除展位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var insertData = Object.assign({}, that.formPosition)
        that.$refs[formName].validate(valid => {
          if (valid) {
            insertData['id'] = that.tplId
            positionTplPositionBatchDelete(insertData).then(response => {
              that.$message.success(response.message)
              that.init()
              return true
            }).catch(() => {})
          } else {
            return false
          }
        })
      }).catch(() => {})
    },
    onAreaDel: function(formName){
      const that = this
      that.$confirm('确定删除该展区吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var insertData = Object.assign({}, that.formArea)
        insertData['id'] = that.tplId
        positionTplAreaDelete(insertData).then(response => {
          that.$message.success(response.message)
          that.init()
          return true
        }).catch(() => {})
      }).catch(() => {})
    },
    switchArea: function(area){
      this.areaVal = area
    },
    onPositionDel: function(area, positionKey, position){
      var that = this
      that
        .$confirm('确定删除该展位吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          const param = {
            id: that.tplId,
            area: area,
            position: position
          }
          positionTplPositionDelete(param).then(response => {
            that.$message.success(response.message)
            that.info.position[area].splice(positionKey, 1)
            return true
          })
        })
        .catch(() => {})
    },
    handleRemove(file, fileList) {
      const param = {
        id: file.name,
        pid: this.tplId
      }
      positionTplImgDelete(param).then(response => {
        this.$message.success(response.message)
        return true
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePhotoSuccess(res, file) {
      if (res.code == 200) {
        const param = {
          id: this.tplId,
          img: res.data.file_id
        }
        positionTplImgAdd(param).then(response => {
          file.name = param.img
          this.$message.success(response.message)
          return true
        })
      } else {
        this.$message.error(res.message)
        return false
      }
    },
    beforePhotoUpload(file) {
      const filetypeArr = file.type.split('/')
      const filetype = filetypeArr[1]
      const configFileExtArr = this.fileupload_ext.split(',')

      if (!configFileExtArr.includes(filetype)) {
        this.$message.error('上传文件格式不允许')
        return false
      }
      if (file.size / 1024 > this.fileupload_size) {
        this.$message.error(`上传文件最大为${this.fileupload_size}kb`)
        return false
      }
      return true
    },
    goto(target) {
      this.$router.push(target)
    }
  }
}
</script>
<style scoped>
.border{border-top:1px dashed #eee;padding:20px 0}
.position{width:100px}
.clear{clear:both;}
.jobfair_position{}
.jobfair_position .pic{ width:1160px; margin:0 auto; margin-top:20px;}
.jobfair_position .pic img{width:1160px;}
.jobfair_position .ptit{ font-size:26px; text-align:center; color:#FF3300; height:60px;  border-bottom:1px #EEEEEE solid}
.jobfair_position .ptit.re{ border-top:1px #EEEEEE solid; line-height:60px; background-color:#F7F7F7}
.jobfair_position .txt{ padding-left:50px; line-height:200%; padding-top:25px;}
.jobfair_position .txt .state{ border:1px #CCCCCC solid; padding:5px 10px; margin-left:30px; margin-right:7px;border-radius:4px;}
.jobfair_position .txt .state.s1{ background-color:#FFFFFF; color:#FFFFFF;}
.jobfair_position .txt .state.s2{ background-color: #999999; color:#999999; border-color: #666666}
.jobfair_position .txt .state.s3{ background-color: #FF6600; color:#FF6600; border-color: #FF3300}
.jobfair_position .txt .state.s4{ background-color:#FFFFFF; color:#FFFFFF;border:1px  #999999 dashed; padding:5px 6px; }
.jobfair_position .txt strong{ padding-right:20px;}
.jobfair_position .txt u{ color:#FF6600; text-decoration:none; font-weight:bold}
.jobfair_position .area{ padding-top:25px;padding-left:80px;}
.jobfair_position .area ul{display:inline-block;*display:inline;*zoom:1;font-size:16px;padding:0}
.jobfair_position .area li{list-style-type: none;line-height: 180%;float:left; padding:4px 30px; background-color:#FFF3D9; border:1px #F5D485 solid; cursor:pointer; margin-right:30px;border-radius:4px;}
.jobfair_position .area li:hover{ background-color:#FF9900; color:#FFFFFF; border:1px #FF8800 solid;}
.jobfair_position .area li.select{ background-color:#FF6600; color:#FFFFFF; border:1px #FF5500 solid;}
.jobfair_position .booth{ padding-top:15px; width:1080px; padding-left:80px;}
.jobfair_position .booth .li{ width:95px; font-size:16px; height:32px; line-height:32px; text-align:center; border:1px #CCCCCC solid; color:#999999; margin-right:20px; float:left; margin-bottom:20px; cursor:pointer;border-radius:4px; position:relative}
.jobfair_position .booth .li:hover{ border:1px  #999999 solid; color:#666666; background-color:#F5F5F5}
.jobfair_position .booth .li.invalid{border:1px  #999999  dashed; color:#cccccc; background-color:#F9F9F9;  text-decoration: line-through}
.jobfair_position .booth .li.audit{border:1px  #FF3300 solid; color:#FFFFFF; background-color:#FF6600}
.jobfair_position .booth .li.succeed{border:1px  #666666 solid; color:#FFFFFF; background-color:#999999}

.jobfair_position .booth .li  .tip{ position:absolute; left:-1px; top:33px; width:320px; z-index:1;}
/*.jobfair_position .booth .li  .tip .arrow{ width:18px; height:7px; margin-left:38px; background-image:url(../images/03.png); background-repeat:no-repeat; background-position:-87px 0px;}
*/.jobfair_position .booth .li  .tip .box{ width:318px;  border:1px #FC4C4E solid; background-color:#FFFCF1;border-radius:4px;
-moz-box-shadow: 0px 0px 10px #E4E4E4;/*firefox*/
-webkit-box-shadow: 0px 0px 10px #E4E4E4;/*safari或chrome*/
box-shadow:0px 0px 10px #E4E4E4;/*opera或ie9*/
}
.jobfair_position .booth .li  .tip .box .t{ height:38px; line-height:38px; background-color:#FC4C4E; color:#FFFFFF; padding-left:20px; text-align:left;}
.jobfair_position .booth .li  .tip .box .restxt{ text-align:center; padding-top:20px; padding-bottom:20px;width:280px; margin:0 auto;overflow:hidden;white-space: nowrap;text-overflow: ellipsis; color:#666666}
.jobfair_position .booth .li  .tip .box .restxt .btn{ padding:8px 20px; font-size:14px; margin-left:20px; background-color:#FF6600; color:#FFFFFF;border-radius:20px;}
.jobfair_position .booth .li  .tip .box .restxt .btn:hover{ background-color:#FF5500;}

.jobfair_position .booth .li  .tip.audit{}/*审核中的样式*/
.jobfair_position .booth .li  .tip.audit .arrow{background-position:0px 0px;}
.jobfair_position .booth .li  .tip.audit .box{ border:1px #FF6600 solid;}
.jobfair_position .booth .li  .tip.audit .box .t{ background-color:#FF6600;}
.jobfair_position .booth .li  .tip.succeed{}/*已完成的样式*/
.jobfair_position .booth .li  .tip.succeed .arrow{background-position:-45px 0px;}
.jobfair_position .booth .li  .tip.succeed .box{ border:1px #4B4B4B solid;}
.jobfair_position .booth .li  .tip.succeed .box .t{ background-color:#4B4B4B;}

</style>
